﻿@model Best.SmartCms.Dto.Mall.ProductInfoDto
@{
  ViewBag.Title = ViewBag.Title + " " + Model.Name;
  Layout = "_Layout";
}
@section Head
  {
  <link href="/css/normalize.css" rel="stylesheet" type="text/css" />
  <script src="~/js/product.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      var showproduct = {
        "boxid": "showbox",
        "sumid": "showsum",
        "boxw": 400,//宽度,该版本中请把宽高填写成一样
        "boxh": 400,//高度,该版本中请把宽高填写成一样
        "sumw": 60,//列表每个宽度,该版本中请把宽高填写成一样
        "sumh": 60,//列表每个高度,该版本中请把宽高填写成一样
        "sumi": 7,//列表间隔
        "sums": 5,//列表显示个数
        "sumsel": "sel",
        "sumborder": 1,//列表边框，没有边框填写0，边框在css中修改
        "lastid": "showlast",
        "nextid": "shownext"
      };//参数定义
      $.ljsGlasses.pcGlasses(showproduct);//方法调用，务必在加载完后执行
    });
  </script>
}
  <div class="showall">
    <!--left -->
    <div class="showbot">
      <div id="showbox">
        @foreach (var item in Model.ImageList)
        {
          <img src="@item" width="400" height="400" />
        }
      </div><!--展示图片盒子-->
      <div id="showsum">
        <!--展示图片里边-->
      </div>
      <p class="showpage">
        <a href="javascript:void(0);" id="showlast"> < </a>
        <a href="javascript:void(0);" id="shownext"> > </a>
      </p>
    </div>
    <!--conet -->
    <div class="tb-property">
      <div class="tr-nobdr">
        <h3>@Model.Name</h3>
      </div>
      <div class="txt">
        <span class="nowprice">￥<a href="">@Model.Price</a></span>
        <del class="oldprice">原价：￥@Model.OldPrice</del>
        <div class="cumulative">
          <span class="number ty1">累计售出<br /><em id="add_sell_num_363">@Model.SoldQuantity</em></span>
        </div>
      </div>
      <script>
        $(document).ready(function () {
          var t = $("#text_box");
          $('#min').attr('disabled', true);
          $("#add").click(function() {
            t.val(parseInt(t.val()) + 1)
            if (parseInt(t.val()) != 1) {
              $('#min').attr('disabled', false);
            }

          });
          $("#min").click(function() {
            t.val(parseInt(t.val()) - 1);
            if (parseInt(t.val()) == 1) {
              $('#min').attr('disabled', true);
            }
          });

          $("#addcart").click(function() {
            var t = $("#text_box").val();
            location.href = "/order/index?id=" + @Model.Id + "&num=" + t;
          });
        });
      </script>
      <div class="gcIpt">
        <span class="guT">数量</span>
        <input id="min" name="" type="button" value="-" />
        <input id="text_box" name="" type="text" value="1" style="width:30px; text-align: center; color: #0F0F0F;" />
        <input id="add" name="" type="button" value="+" />
        <span class="Hgt">库存（@Model.StockQuantity）</span>
      </div>
      <div class="nobdr-btns">
        <button id="addcart" class="addcart yh"><img src="/images/ht.png" width="25" height="25" />立即购买</button>
      </div>
      <div class="guarantee">
        <span>邮费：包邮&nbsp;&nbsp;七天无理由退换 <a href=""><img src="/images/me.png" title="不影响第二次销售，承诺七天无理由退换" /></a></span>
      </div>
    </div>
    <!--right -->
    @await Component.InvokeAsync("ProductKefu", Model.Id)
  </div>
<!-- 推荐搭配 -->
@*@await Component.InvokeAsync("ProductDaPei", Model.Id)*@
<!-- 商品介紹 -->
<div class="gdetail">
  <!-- left -->
  @await Component.InvokeAsync("ProductTuijian", Model.Id)
  <!-- right -->
  <script>
    var detail = document.querySelector('.detail');
    var origOffsetY = detail.offsetTop;
    function onScroll(e) {
      window.scrollY >= origOffsetY ? detail.classList.add('sticky') :
        detail.classList.remove('sticky');
    }
    document.addEventListener('scroll', onScroll);
  </script>
  <div class="detail">
    <div class="active_tab" id="outer">
      <ul class="act_title_left" id="tab">
        <li class="act_active">
          <a href="#">商品详情</a>
        </li>
        @*<li>
            <a href="#">商品介绍</a>
          </li>
          <li>
            <a href="#">商品评价</a>
          </li>
          <li>
            <a href="#">售后保障</a>
          </li>*@
      </ul>
      @*<ul class="act_title_right">
          <li class="mui">
            <a id="mui-a" href="#">扫手机下单+</a>
          </li>
          <li class="mui-ac">
            <a href="#">加入购物车</a>
          </li>
        </ul>*@
      <div class="clear"></div>
    </div>
    <div id="content" class="active_list">
      <!--0-->
      <div id="ui-a" class="ui-a">
       @Html.Raw(Model.Content)
      </div>
      @*<!--商品规格-->
        <div id="bit" class="bit">
          <ul style="display:none;">
            <li><img src="images/ko-1.jpg" /></li>
            <li><img src="images/ko-2.jpg" /></li>
            <li><img src="images/ko.jpg" /></li>
            <li><img src="images/ko-1.jpg" /></li>
            <li><img src="images/ko-2.jpg" /></li>
          </ul>
        </div>
        <!--商品评价-->
        <div id="ui-c" class="ui-c">
          <ul style="display:none;"></ul>
        </div>
        <!--售后保障-->
        <div id="uic" class="uic">
          <ul style="display:none;">
            <p>商品名称：仙人指路道镜前后双录智能后视镜导航仪行车记录仪后视预警一体机</p>
            <p>商品编号：ECS001983</p>
            <p>品牌:威力马哈国产</p>
            <p>上架时间：2016-05-24</p>
            <span><img src="images/ko-1.jpg" /></span>
            <span><img src="images/ko-2.jpg" /></span>
          </ul>
        </div>*@
    </div>
    <script>
      $(function () {
        window.onload = function () {
          var $li = $('#tab li');
          var $ul = $('#content ul');
          $li.mouseover(function () {
            var $this = $(this);
            var $t = $this.index();
            $li.removeClass();
            $this.addClass('act_active');
            $ul.css('display', 'none');
            $ul.eq($t).css('display', 'block');
          })
        }
      });
    </script>
  </div>
</div>